<template>
  <div class="container">

    <el-row :gutter="24">
      <el-col :span="8">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">节点数</div>
            <div class="top-card-detail">20</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">系统类型</div>
            <div class="top-card-detail">MYSQL</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div>
            <div class="top-card-title">健康趋势</div>
            <div id="healthChart" class="healthChart" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="always" style="margin-top: 20px">
      <div>
        <div class="card-header-title">节点负载</div>
        <el-divider />
        <div style="display: flex; flex-direction: row">
          <div id="nodeBarChart" class="nodeBarChart" />

          <div style="display: flex; flex-direction: column; width: 30%">
            <div class="node-list-title">节点负载率排名</div>
            <div class="node-list-container">
              <div v-for="(item, index) in nodeRanking" :key="index" class="node-list-item">
                <div style="display: flex; flex-direction: row; align-items: center; min-width: 100px">
                  <div
                    class="node-list-item-index"
                    :style="{background: index < 3 ? '#314659' : '#f5f5f5', color: index < 3 ? '#FFFFFF' :
                      '#333333'}"
                  >
                    {{ index+1 }}
                  </div>
                  <div>
                    {{ nodeBarOption.xAxis.data[index] }}
                  </div>
                </div>
                <div>
                  {{ item | percentageFilter }}
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </el-card>

    <div style="display: flex; flex-direction: row; width: 100%; height: 400px; margin-top: 20px">

      <el-card shadow="always" style="width: 50%; margin-right: 25px">
        <div class="card-header-title">告警情况</div>
        <el-divider />
        <div class="report-list-container">
          <el-table
            :data="alarmHistoaryRecentlyData"
            style="width: 100%"
          >
            <el-table-column
              prop="level"
              label="等级"
              sortable
              min-width="60"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.level === 'critical'" style="width: 40px; line-height: 20px; background: red; text-align: center; font-size: 10px">
                  致命</div>
                <div v-if="scope.row.level === 'warning'" style="width: 40px; line-height: 20px; background: yellow; text-align: center; font-size: 10px">提示</div>
                <div
                  v-if="scope.row.level === 'ok'"
                  style="width: 40px; line-height: 20px; background: greenyellow; text-align: center;
                                font-size: 10px"
                >正常</div>
              </template>

            </el-table-column>
            <el-table-column
              prop="create_time"
              label="发生时间"
              sortable
              min-width="80"
            />
            <el-table-column
              prop="alarm_item"
              label="诊断项"
              min-width="120"
            />
            <el-table-column
              prop="alarm_value"
              label="诊断值"
              min-width="120"
            />

          </el-table>
        </div>
      </el-card>

      <el-card shadow="always" style="width: 50%;">
        <div class="card-header-title">任务运行状况</div>
        <el-divider />
        <div id="taskChart" class="taskChart" />
      </el-card>

    </div>

  </div>
</template>

<script>

import { mysqlServersSimpleInfo, alarmHistoaryRecently } from '../../api/api'

import echarts from 'echarts'

const timeSpace = 5000

var healthChartData = []
var healthChartXAxisData = []

var nodeBarChartData = []
var nodeBarChartXAxisData = []

export default {
  filters: {
    percentageFilter: function(value) {
      if (!value) {
        return ''
      }
      return (Math.round(value * 100) / 100.00 + '%')
    }
  },
  data() {
    return {
      dbSelecteds: [],
      analyzeTypeSelects: [
        { label: 'I/O资源抢占', value: '0' },
        { label: 'CPU资源抢占', value: '1' },
        { label: '数据库备份', value: '2' },
        { label: '数据表导入', value: '3' },
        { label: '错误的物理设计', value: '4' },
        { label: '网络阻塞', value: '5' },
        { label: 'VACUUM ANALYZE', value: '6' }
      ],
      alarmHistoaryRecentlyData: [],
      alarmHistoaryRecentlyAllData: [],
      alarmHistoaryDialogTableVisible: false,
      changeCount: 0,
      changeRandom: 5,
      analyzeTypeSelectCondition: '0',
      dbSelectCondition: '',
      dateSelectCondition: '',
      healthChart: undefined,
      nodeBarChart: undefined,
      taskChart: undefined,
      nodeRanking: [],
      reportedList: [
        { level: 3, start_time: '17:52:57', category: 'CPU利用率', time: '30分钟24秒' },
        { level: 2, start_time: '16:48:57', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:38:56', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:28:58', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:18:56', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '16:08:57', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '15:58:56', category: '慢SQL', time: '10秒' },
        { level: 2, start_time: '15:48:56', category: '慢SQL', time: '10秒' }
      ],
      taskChartData: {
        selectedData: {},
        legendData: [],
        seriesData: []
      },
      healthChartOption: {
        title: { show: false },
        grid: {
          left: 0,
          top: 10,
          bottom: 0,
          right: 0
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            // 坐标轴小标记
            show: false
          },
          data: healthChartXAxisData
        },
        yAxis: {
          type: 'value',
          offset: 0,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            areaStyle: {
              color: '#975FE4'
            },
            lineStyle: {
              color: '#975FE4'
            },
            name: '',
            data: healthChartData,
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      nodeBarOption: {
        title: { show: false },
        grid: {
          left: 30,
          top: 20,
          bottom: 40,
          right: 30
        },
        xAxis: {
          type: 'category',
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            length: 2,
            fontSize: 8,
            color: '#333333',
            shadowColor: '#fff', // 默认透明
            shadowBlur: 0,
            interval: '0',
            rotate: 30
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: '#999999',
              shadowColor: '#fff',
              shadowBlur: 10
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            // 坐标轴小标记
            show: false
          },
          data: nodeBarChartXAxisData
        },
        yAxis: {
          type: 'value',
          offset: 0,
          nameTextStyle: {
            color: '#666666'
          },
          axisLabel: {
            show: true,
            length: 2,
            color: '#999999',
            shadowColor: '#fff', // 默认透明
            shadowBlur: 10
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e5e5e5',
              type: 'dotted'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            itemStyle: {
              color: '#1890FF',
              width: 2
            },
            showBackground: false,
            backgroundStyle: {
              color: '#f5f5f5'
            },
            name: '',
            data: nodeBarChartData,
            type: 'bar',
            smooth: true,
            showSymbol: false,
            hoverAnimation: true
          }
        ]
      },
      taskChartOption: {
        title: {
          show: false,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 0,
          top: 10,
          bottom: 10,
          data: undefined,
          selected: undefined
        },
        series: [
          {
            name: '任务运行状况',
            data: undefined,
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            itemStyle: {
              borderWidth: 2.5,
              borderColor: '#ffffff'
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.getMysqlServersSimpleInfo()
    this.alarmHistoaryRecently()
    this.drawLine()
    const that = this

    this.taskChartData.legendData = ['Active', 'Idle', 'Block', 'Others']
    this.taskChartData.seriesData = [
      { name: 'Active', value: 45, itemStyle: { color: '#6DD48C' }},
      { name: 'Idle', value: 30, itemStyle: { color: '#1890FF' }},
      { name: 'Block', value: 5, itemStyle: { color: '#F2637B' }},
      { name: 'Others', value: 20, itemStyle: { color: '#975FE5' }}
    ]
    this.taskChartData.selectedData = { Active: true, Idle: false, Block: true, Others: true }

    this.taskChartOption.series[0].data = this.taskChartData.seriesData
    this.taskChartOption.legend.data = this.taskChartData.legendData
    this.taskChartOption.selected = this.taskChartData.selectedData

    this.taskChart.setOption(this.taskChartOption, true)

    for (let i = 0; i < 20; i++) {
      if (nodeBarChartData.length >= 20) {
        return
      }
      nodeBarChartData.push(Math.random() * 100)
      nodeBarChartXAxisData.push('123.56.63.' + (i + 100))
      this.nodeBarChart.setOption(this.nodeBarOption)
      that.nodeRanking = [].concat(nodeBarChartData)
      that.nodeRanking.sort(function(a, b) {
        return b - a
      })
    }

    for (let i = 0; i < 20; i++) {
      if (healthChartData.length >= 20) {
        return
      }
      healthChartData.push(Math.random() * 100)
      healthChartXAxisData.push(i)
      this.healthChart.setOption(this.healthChartOption)
    }

    setInterval(function() {
      for (let i = 0; i < nodeBarChartData.length; i++) {
        nodeBarChartData[i] = Math.random() * 100
      }
      that.nodeRanking = [].concat(nodeBarChartData)
      that.nodeRanking.sort(function(a, b) {
        return b - a
      })
      that.nodeBarChart.setOption(that.nodeBarOption)
    }, timeSpace)

    window.onresize = function() {
      that.nodeBarChart.resize()
      that.healthChart.resize()
      that.taskChart.resize()
    }
  },
  destroyed() {
    window.onresize = null
  },

  methods: {
    getMysqlServersSimpleInfo() {
      mysqlServersSimpleInfo({}).then((res) => {
        this.dbSelecteds = res.data
      }).catch(() => {
      })
    },
    alarmHistoaryRecently() {
      alarmHistoaryRecently({ limit: 20 }).then((res) => {
        this.alarmHistoaryRecentlyData = res.data
      }).catch(() => {
      })
    },
    drawLine() {
      this.nodeBarChart = echarts.init(document.getElementById('nodeBarChart'))
      this.nodeBarChart.setOption(this.nodeBarOption)

      this.healthChart = echarts.init(document.getElementById('healthChart'))
      this.healthChart.setOption(this.healthChartOption)

      this.taskChart = echarts.init(document.getElementById('taskChart'))
      this.taskChart.setOption(this.taskChartOption)
    }
  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .healthChart {
        width: 100%;
        height: 60px;
    }

    .top-card-title {
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
        line-height: 22px;
    }

    .top-card-detail {
        color: rgba(0, 0, 0, .85);
        font-weight: bolder;
        white-space: nowrap;
        word-break: break-all;
        font-size: 30px;
        line-height: 60px;
    }

    .card-header-title {
        color: rgba(0, 0, 0, .85);
        font-weight: 500;
        white-space: nowrap;
        word-break: break-all;
        font-size: 18px;
    }

    .el-divider--horizontal {
        margin: 20px 0;
    }

    .nodeBarChart {
        width: 70%;
        height: 260px;
    }

    .node-list-title {
        color: rgba(0, 0, 0, .85);
        font-size: 14px;
        line-height: 22px;
        font-weight: 500;
    }

    .node-list-container {
        height: 240px;
        width: 100%;
        overflow: auto;
    }

    .node-list-item-index {
        line-height: 20px;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        background: #409EFF;
        text-align: center;
        font-size: 12px;
        margin-right: 10px;
    }

    .node-list-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        color: rgba(0, 0, 0, .65);
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    .report-list-container {
        height: 290px;
        width: 100%;
        overflow: auto;
    }

    .taskChart {
        width: 100%;
        height: 290px;
    }

    .main_data_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        background: #FFFFFF;
        margin-top: 40px;
        width: 100%;
    }

    .main_data_item_container {
        display: flex;
        justify-content: center;
        width: 20%;
        height: 320px;
        margin-right: 5%;
        flex-direction: column;
        border-radius: 2px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
    }

    .main_data_item_title {
        width: 100%;
        height: 60px;
        font-size: 20px;
        font-weight: bold;
        color: #666666;
        text-align: center;
        line-height: 60px;
    }

    .main_data_item_chart_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .main_data_item_chart_title {
        font-weight: 200;
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        color: #888888;
    }

    .os_data_container {
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        margin-top: 40px;
        width: 100%;
    }

</style>
